<template>
  <div>
    <vxe-toolbar ref="xToolbar" :loading="loading" class="toolbar">
      <template #buttons>
        <vxe-form :data="formData" size="small">
          <vxe-form-item title="名称：" field="name" :item-render="{}">
            <template #default="{ data }">
              <vxe-input
                v-model="data.name"
                placeholder="请输入名称"
                clearable
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="账号：" field="account" :item-render="{}">
            <template #default="{ data }">
              <vxe-input
                v-model="data.account"
                placeholder="请输入账号"
                clearable
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="性别：" field="sex" :item-render="{}">
            <template #default="{ data }">
              <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
                <vxe-option value="1" label="女"></vxe-option>
                <vxe-option value="2" label="男"></vxe-option>
              </vxe-select>
            </template>
          </vxe-form-item>
          <vxe-form-item title="状态：" field="state" :item-render="{}">
            <template #default="{ data }">
              <vxe-select
                v-model="data.state"
                placeholder="请选择状态"
                clearable
              >
                <vxe-option value="1" label="启用"></vxe-option>
                <vxe-option value="2" label="禁用"></vxe-option>
              </vxe-select>
            </template>
          </vxe-form-item>
          <vxe-form-item title="区域：" field="states" :item-render="{}">
            <template #default="{ data }">
              <vxe-select
                v-model="data.states"
                placeholder="请选择所属区域"
                clearable
              >
                <vxe-option
                  v-for="item in quyu"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></vxe-option>
              </vxe-select>
            </template>
          </vxe-form-item>
        </vxe-form>
        <vxe-button
          status="primary"
          content="查询"
          @click="insertEventQuery"
        ></vxe-button>
        <vxe-button
          status="primary"
          content="重置"
          @click="insertEventReset"
        ></vxe-button>
        <vxe-button
          status="primary"
          content="新增"
          @click="insertEvent"
        ></vxe-button>
        <vxe-button
          status="primary"
          content="批量新增"
          @click="insertEventExcel"
        ></vxe-button>
        <vxe-button
          status="primary"
          content="导出"
          @click="insertEventExport"
        ></vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-grid
      ref="xGrid"
      height="500"
      :data="tableData"
      :export-config="{}"
      :columns="columns"
      @edit-closed="editClosedEvent"
      :edit-config="{
        trigger: 'dblclick',
        mode: 'row',
        showUpdateStatus: true,
        showInsertStatus: true,
      }"
    >
      <template #operation="{ row }">
        <vxe-button
          size="small"
          status="primary"
          content="编辑"
          @click="compileBtn(row)"
        ></vxe-button>
        <vxe-button
          v-if="row.state == 1"
          size="small"
          status="success"
          content="启用"
          @click="stateqBtn(row)"
        ></vxe-button>
        <vxe-button
          v-else
          size="small"
          status="info"
          content="禁用"
          @click="statejBtn(row)"
        ></vxe-button>
        <vxe-button
          size="small"
          status="danger"
          content="删除"
          @click="deleteBtn(row)"
        ></vxe-button>
      </template>
    </vxe-grid>

    <vxe-pager
      background
      :current-page="page.currentPage"
      :page-size="page.pageSize"
      :total="page.totalResult"
      @page-change="pageChange"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'JumpNumber',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total',
      ]"
    >
    </vxe-pager>

    <vxe-modal
      v-model="dialogVisible"
      title="记忆功能的窗口"
      width="600"
      height="400"
      show-zoom
      resize
      remember
    >
      <template #default>
        <vxe-form
          ref="allformData"
          :data="allformData"
          :rules="formRules"
          title-align="right"
          title-width="60"
          @submit="submitEvent"
        >
          <vxe-form-item
            title="基本信息"
            span="24"
            title-align="left"
            title-width="200px"
          ></vxe-form-item>
          <vxe-form-item
            title="名称"
            field="name"
            span="12"
            :item-render="{
              name: 'input',
              attrs: { placeholder: '请输入名称' },
            }"
          ></vxe-form-item>
          <vxe-form-item
            title="昵称"
            field="nickname"
            span="12"
            :item-render="{
              name: 'input',
              attrs: { placeholder: '请输入昵称' },
            }"
          ></vxe-form-item>
          <vxe-form-item
            title="性别"
            field="sex"
            span="12"
            :item-render="{
              name: '$select',
              options: [
                { label: '男', value: 0 },
                { label: '女', value: 1 },
              ],
            }"
          ></vxe-form-item>
          <vxe-form-item
            title="账号"
            field="account"
            span="12"
            :item-render="{
              name: 'input',
              attrs: { type: 'input', placeholder: '请输入账号' },
            }"
          ></vxe-form-item>
          <vxe-form-item
            title="区域"
            field="states"
            span="24"
            :item-render="{ name: '$select', options: quyu }"
          ></vxe-form-item>
          <vxe-form-item
            title="状态"
            field="state"
            span="24"
            :item-render="{
              name: '$select',
              options: [
                { label: '启用', value: 0 },
                { label: '禁用', value: 1 },
              ],
            }"
          ></vxe-form-item>
          <vxe-form-item align="right" span="24">
            <template #default>
              <vxe-button type="reset" @click="dialogVisible = false"
                >取消</vxe-button
              >
              <vxe-button type="submit" status="primary">确定</vxe-button>
            </template>
          </vxe-form-item>
        </vxe-form>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      dialogVisible: false,
      formData: {
        name: "",
        sex: "",
        state: "",
        account: "",
        states: "",
      },
      page: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0,
      },
      formRules: {
        name: [
          { required: true, message: "请输入名称" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符" },
        ],
        nickname: [{ required: true, message: "请输入昵称" }],
        sex: [{ required: true, message: "请选择性别" }],
      },
      allformData: {
        name: "",
        nickname: "",
        sex: "",
        account: "",
        states: "",
        state: "",
      },
      quyu: [
        { label: "区域一", value: 1 },
        { label: "区域二", value: 2 },
        { label: "区域三", value: 3 },
        { label: "区域四", value: 4 },
        { label: "区域五", value: 5 },
      ],
      tableData: [
        {
          name: "23",
          sex: "男",
          account: "2232432",
          nickname: "32543",
          states: "区域一",
          state: 1,
        },
        {
          name: "23",
          sex: "男",
          nickname: "32543",
          account: "2223434",
          states: "区域二",
          state: 0,
        },
        {
          name: "23",
          sex: "女",
          nickname: "32543",
          account: "22432321",
          states: "区域三",
          state: 1,
        },
      ],
      columns: [
        { type: "checkbox", width: 50 },
        {
          field: "name",
          title: "名字",
        },
        {
          field: "nickname",
          title: "昵称",
          editRender: {
            name: "input",
            events: { input: this.nameChangeEvent },
            props: { placeholder: "请输入昵称" },
          },
        },
        {
          field: "sex",
          title: "性别",
          editRender: {
            name: "$select",
            options: [
              { label: "女", value: "0" },
              { label: "男", value: "1" },
            ],
          },
        },
        {
          field: "account",
          title: "账号",
          editRender: { name: "input", props: { placeholder: "请输入账号" } },
        },
        {
          field: "states",
          title: "区域",
          editRender: {
            name: "$select",
            options: [],
          },
        },
        {
          field: "state",
          title: "状态",
          editRender: {
            name: "$select",
            options: [
              { label: "启用", value: "0" },
              { label: "禁用", value: "1" },
            ],
          },
        },
        {
          title: "操作",
          slots: { default: "operation" },
        },
      ],
    };
  },
  created() {
    this.columns[5].editRender.options = this.quyu;
  },
  methods: {
    //查询
    insertEventQuery() {
      console.log(this.formData);
    },
    //重置
    insertEventReset() {
      this.formData = {};
    },
    //新增
    insertEvent() {
      this.allformData = {};
      this.dialogVisible = true;
      this.id = "1";
    },
    //批量新增
    insertEventExcel() {
      this.$refs.xGrid.importData();
    },
    //导出
    insertEventExport() {
      this.$refs.xGrid.openExport({
        original: true,
      });
    },
    //启用
    stateqBtn(row) {},
    //禁用
    statejBtn(row) {},
    // 编辑关闭触发事件
    editClosedEvent({ row }) {
      console.log(row);
    },
    //编辑
    compileBtn(row) {
      this.dialogVisible = true;
      this.allformData = row;
      this.id = "2";
    },
    //编辑确认
    submitEvent() {
      if (this.id == "1") {
        alert("新增");
        this.dialogVisible = false;
      } else {
        this.dialogVisible = false;
        alert("编辑");
      }
    },
    //删除
    deleteBtn(row) {
      this.$msgbox({
        message: "",
        message: "您确定要删除吗",
        title: "确认删除",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showCancelButton: true,
        type: "error",
      })
        .then(() => {
          console.log(row);
          this.$message({
            message: "删除成功",
            type: "success",
          });
        })
        .catch(() => {
          this.$message({
            message: "取消删除",
            type: "info",
          });
        });
    },
    //分页触发
    pageChange({ currentPage, pageSize }) {
      this.page.currentPage = currentPage;
      this.page.pageSize = pageSize;
    },
    ageFocusEvent(row) {
      console.log(row);
    },
  },
};
</script>

<style lang="less" scoped>
.toolbar {
  padding: 0 10px;
  margin-bottom: 20px;
  height: 120px;
}
</style>